{% extends "layout.html" %}

{% block title %}{{ title }}{% endblock %}

{% block extra_head_block %}
    <style>
      html, body {
       height:100%;
      }
    </style>
{% endblock %}


{% block main_content %}
<div id="timeline-embed"></div>
{% endblock %}


{% block extra_scripts %} 
  <script type="text/javascript">
      var timeline_config = {
          width:              '100%',
          height:             '88%',
          source:             '/timeline',
          embed_id:           'timeline-embed',    //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
          start_at_end:       true,               //OPTIONAL START AT LATEST DATE
          // start_at_slide:     '4',                 //OPTIONAL START AT SPECIFIC SLIDE
          start_zoom_adjust:  '-4',                 //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
          hash_bookmark:      true,                //OPTIONAL LOCATION BAR HASHES
          font:               'Bevan-PotanoSans',  //OPTIONAL FONT
          debug:              true,                //OPTIONAL DEBUG TO CONSOLE
          lang:               '{{ _("timeline_lang") }}',                //OPTIONAL LANGUAGE
          maptype:            'watercolor',        //OPTIONAL MAP STYLE
          css:                '/static/timeline/css/timeline.css',     //OPTIONAL PATH TO CSS
          js:                 '/static/timeline/js/timeline-min.js'    //OPTIONAL PATH TO JS
      }
  </script>
  <script type="text/javascript" src="/static/timeline/js/storyjs-embed.js"></script>
{% endblock %}
